import React, { useEffect, useState } from 'react'; 
import { useHistory } from "react-router-dom"; 
import QRCode from 'qrcode.react'
import './qrcode.less';  
import Header from "../../../components/header/Header";  
import Btn from "../../../components/btn/Btn"; 
import http from "../../../model/http";
import { dateFormat, sendMsg } from "../../../model/code";
import { Flex } from 'antd-mobile'; 
function Qrcode() { 
    const [url,setUrl] = useState('')
    const [ahref,setAhref] = useState('')
    const user = JSON.parse(window.localStorage.getItem('user'))


    useEffect(async () => {  
        let userDetail = history.location.state.userInfo
        
        setUrl(`http://wxwork.gzsg.cn/ASGPF/index.html?userId=${user.userid}&managerId=${user.managerId}&customerCrmId=${userDetail.customerCrmId}&card_no=${userDetail.mzcode}&customer_name=${userDetail.customerName}`)
        setTimeout(() => {
            changeCanvasToPic() 
        }, 500);
        
    }, [])
    const history = useHistory();
     
    const submit = () => {
        console.log('转发') 
    }
    const changeCanvasToPic = () => {
        const canvasImg = document.getElementById('qrCode'); // 获取canvas类型的二维码
        const img = new Image();
        img.src = canvasImg.toDataURL('image/png'); // 将canvas对象转换为图片的data url
        
        setAhref(img.src) 
    };
     
    
    return (
        <div className="v-home-medicalElectronNav-qrcode"> 
            <div className="img-box"> 
                <QRCode id="qrCode" value={url} />
                <img src={ahref} />
            </div> 
            {/* <Flex>
                <Flex.Item>
                    <Btn type='primary' onClick={() => submit()} className="edut2-operation-button">保存到本地</Btn>
                </Flex.Item>
            </Flex>  */}
            <Header />
        </div>
    )
}
export default Qrcode;